<template>
  <div>
    <el-calendar v-model="value">
      <template
       slot="dateCell"
       slot-scope="{data}">
       <div @click="selsingleone(data)" :class="objFn(data) == true ? 'celanderBackground' : ''">
       {{ data.day.split('-').slice(2).join('-') }}
        <div v-for="sin in singles" :key="sin.sinDayAppId" v-show="sin.sinDayAppDate == data.day">
          可预约人数：<span style="color:red;font-size:19px;font-weight:bold">{{sin.sinDayAppCanapp}}</span><br>
          已预约人数：<span style="color:#409EFF;font-size:19px;font-weight:bold">{{sin.sinDayAppApp}}</span>
        </div>
       </div>
      </template>
    </el-calendar>

    <el-dialog
  title="设置预约人数"
  :visible.sync="dialogVisible"
  width="30%">
  <h3>{{single.sinDayAppDate}}</h3>
  <h4>可预约人数：</h4>
   <el-input-number v-model="single.sinDayAppCanapp" controls-position="right" :min="0"></el-input-number>
  <span slot="footer" class="dialog-footer">
    <el-button @click="clearsingle()">取 消</el-button>
    <el-button type="primary" @click="singleapp()">确 定</el-button>
  </span>
</el-dialog>
  </div>
</template>

<script>
import axios from 'axios'

export default({
  name: 'bespeakSetting',
  data () {
    return {
      dialogVisible: false,
      value: new Date(),
      singles: [],
      single: {
        sinDayAppId: '',
        sinDayAppDate: '',
        sinDayAppCanapp: 0,
        sinDayAppApp: 0
      }
    }
  },
  methods: {
    selsingle () {
      axios.post('/api/single/singlesel').then(result => {
        this.singles = result.data
      })
    },
    selsingleone (data) {
      // console.log(data)
      axios.get('/api/single/selsingleone/' + data.day).then(result => {
        if (result.data === '') {
          this.single.sinDayAppDate = data.day
        } else {
          this.single = result.data
        }
        // console.log(this.single)
        this.dialogVisible = true
      })
    },
    singleapp () {
      if (this.single.sinDayAppCanapp >= this.single.sinDayAppApp) {
        axios.post('/api/single/singleapp', this.single).then(result => {
          if (result.data) {
            this.$message({
              message: '设置成功',
              type: 'success'
            })
          } else {
            this.$message.error('设置失败，请稍后重试')
          }
          this.clearsingle()
          this.selsingle()
        })
      } else {
        this.$message.error('设置失败，可预约人数不能小于已预约的人数')
      }
    },
    clearsingle () {
      this.single = {
        sinDayAppId: '',
        sinDayAppDate: '',
        sinDayAppCanapp: 0,
        sinDayAppApp: 0
      }
      this.dialogVisible = false
    },
    objFn (data) {
      let flag = false
      this.singles.forEach(e => {
        if (e.sinDayAppDate === data.day) {
          flag = true
        }
      })
      return flag
    }
  },
  created () {
    this.selsingle()
  }
})
</script>

<style scoped>
.celanderBackground{
  background-color:#B9E9F2;
  width:100%;
  margin:0px;
  box-sizing: border-box;
  height: 75px;
}
</style>
